<template>
  <NewCard title="供应品种" :isright="true">
    <template slot="right">
        <el-button type="text" class="handleBtn" @click="clickEdit">操作</el-button>
    </template>
    <!-- 供应品种 -->
    <div class="conditionsTxt">
        <h3>
            <p>最高额度</p>
            <p>最高期限</p>
            <p>名义利率</p>
            <p>办结天数</p>
            <p>还款方式</p>
        </h3>
        <ul>
            <li v-for="(tab,index) in tableList" :key="index" @click="clickList(tab)" :class="varietiesId==tab.id?'isActive':''">
                <h4>{{tab.name}}</h4>
                <div class="detail-box">
                    <p>{{getAmount(tab.amount)}}万</p>
                    <p>{{tab.term}}年</p>
                    <p>{{tab.nominalRate}}%</p>
                    <p>{{tab.closingDays}}</p>
                    <p>
                      <el-select v-model="tab.repaymentType" placeholder="还款方式" @change="addInputValue(tab)">
                        <el-option label="等额本息" value="1"></el-option>
                        <el-option label="等额本金" value="2"></el-option>
                        <el-option label="先息后本-年" value="3"></el-option>
                        <el-option label="先息后本-月" value="4"></el-option>
                        <el-option label="先息后本-季" value="5"></el-option>
                      </el-select>
                    </p>
                </div>
            </li>
        </ul>
    </div>

    <!-- 底部按钮 
    <div class="bottomBtn">
        <el-button @click="clickbBtn" v-show="bottomBtnShow">+添加供应品种</el-button>
        <div class="addAss-box" v-show="bottomBtnShow==false">
        <div class="addAss-btn">
            <el-input 
            v-model="bottomBtnValue"
            placeholder="供应品种"
            ref="bottBtn">
            </el-input>
            <el-input 
            v-model="bottomBtnValue"
            placeholder="使用地区">
            </el-input>
            <el-button type="primary" round>确定</el-button>
            <el-button round @click="bottomBtnShow=true">取消</el-button>
        </div>
        </div>
    </div>-->

    <!-- 供应品种抽屉  -->
    <el-drawer
        title="供应品种"
        size="40%"
        @close="drawerClose"
        :visible.sync="editDrawer">
        <div class="edit-box" v-hasPermi="['tool:loan:edit']">
            <h3>
                <p>删除</p>
                <p>最高额度(元)</p>
                <p>最高期限</p>
                <p>名义利率</p>
                <p>办结天数</p>
                <p>还款方式</p>
            </h3>
            <div class="edit-list" v-for="(item, index) in tableList" :key="index">
                <i class="el-icon-remove" @click="removeBtn(item)" v-hasPermi="['tool:loan:remove']"></i>
                <el-input v-model="item.name" placeholder="贷款项目名称" ref="editInput" @blur="blurInput(item)" @input="addInputValue(item)"></el-input>
                <div class="detail-box">
                  <p></p>
                  <el-input v-model.number="item.amount" placeholder="最高额度" @blur="blurInput(item)" @input="addInputValue(item)"></el-input>
                  <el-input v-model="item.term" placeholder="最高期限" @blur="blurInput(item)" @input="addInputValue(item)"></el-input>
                  <el-input v-model="item.nominalRate" placeholder="名义利率" @blur="blurInput(item)" @input="addInputValue(item)"></el-input>
                  <el-input v-model.number="item.closingDays" placeholder="办结天数" @blur="blurInput(item)" @input="addInputValue(item)"></el-input>
                  <el-select v-model="item.repaymentType" placeholder="还款方式" @change="addInputValue(item)">
                    <el-option label="等额本息" value="1"></el-option>
                    <el-option label="等额本金" value="2"></el-option>
                    <el-option label="先息后本-年" value="3"></el-option>
                    <el-option label="先息后本-月" value="4"></el-option>
                    <el-option label="先息后本-季" value="5"></el-option>
                  </el-select>
                </div>
            </div>
            <!-- 添加图标 -->
            <p class="drawerAdd">
                <svg-icon icon-class="add-icon" @click="addList" v-hasPermi="['tool:loan:add']"/>
            </p>
        </div>
        <SubBtn v-if="addBtnState">
            <template slot="btn">
                <el-button round @click="cancelBtn">取消</el-button>
                <el-button type="primary" round @click="saveBtn">保存</el-button>
            </template>
        </SubBtn>
    </el-drawer>

  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";

import {getLoanListApi,getLoanAddApi,getLoanEditApi,getLoanRemoveApi} from "@/wss/newApi_3-24/tool/loan.js"
import debounce from "lodash/debounce";
export default {
  components:{
    NewCard,
    SubBtn,
  },
  data(){
    return{
      bottomBtnShow:true,//底部按钮
      bottomBtnValue:'',//底部输入值

      orgId:'',// 供应机构的id
      varietiesId:'',// 供应品种的id

      tableList:[],// 供应品种
      addBtnState: false,// 添加取消的按钮

      editBtnState: false,// 标识是否为保存按钮的状态
      editDrawer: false,//编辑材料的状态
      drawerState:false,//当前 材料抽屉的状态
      temTableList:[],//暂存的数据
    }
  },
  mounted(){
    // 获得供应机构的id
    this.$bus.$on('getOrgId',(id)=>{
      this.orgId = id
    })

    // 刷新供应品种
    this.$bus.$on('againLoanList',(state)=>{
       this.getLoanList(state) // 获取供应品种
    })
  },
  watch:{
    orgId(newValue,oldValue){
      this.getLoanList() // 获取供应品种
    }
  },
  methods:{
    // 获取供应品种
    async getLoanList(state){
      let organization_id = this.orgId
      let result = await getLoanListApi({organization_id})
      if(result.code==200){
        this.tableList = result.rows
        
        // 如果state不等于true的时候不用默认选中第一个
        if(!state){
          // 默认选中第一个供应品种
          this.varietiesId = this.tableList[0].id
          //传递 供应品种的id 和 条件集合码 和项目id
          this.$bus.$emit('getSupplyVarId', this.tableList[0].id, this.tableList[0].conditionIds, this.tableList[0].projectId) 
        }
      }
    },

    // 计算当前最高额度 整数和小数分开（js浮点运算bug）
    getAmount(num){
      if(num){
        let amount = 0
        let arr = num.toString().split('.')

        amount = amount + Number(arr[0]) / 10000
        if(arr[1]){
          amount = amount + (Number(arr[1])/10) / 10000
        }
        return amount
      }
    },

    // 选中某一行 获取id
    clickList(tab){
      this.varietiesId = tab.id
      //传递供应品种的id和条件集合码
      this.$bus.$emit('getSupplyVarId',tab.id, tab.conditionIds, tab.projectId)
    },

    // 点击添加机构
    clickbBtn(){
      //显示输入框
      this.bottomBtnShow = false
      //输入框自动获取焦点
      this.$nextTick(()=>{
        this.$refs.bottBtn.focus()
      })
    },

    //点击操作按钮
    clickEdit(){
        this.editDrawer = true //显示编辑材料
        this.temTableList = JSON.parse(JSON.stringify(this.tableList)) //暂存项目材料数据
    },
    // 当关闭编辑项目材料的时候
    editDrawerClose(){
        if(!this.editBtnState){
            this.tableList = JSON.parse(JSON.stringify(this.temTableList)) //恢复项目材料数据
        }
    },

    // 添加一条数据
    addList(){
      // 如果之前的一条没点保存不给添加新的一条
      if(this.addBtnState) {
        this.$message({message: '请保存！',type: 'warning'});
        return
      }

      this.tableList.push({
        organizationId: this.orgId,
        amount: null,
        closingDays: null,
        nominalRate: "",
        repaymentType: "1",
        term: null,
        name:'',
      })
      // 激活输入框
      this.$nextTick(()=>{
        this.$refs.editInput[this.$refs.editInput.length-1].focus()
      })
      // this.addBtnState = true //显示按钮
    },

    // 项目名称失去焦点的时候
    async blurInput(item){
      if(item.id){
        
      }
    },

    // 输入完成之后添加
    addInputValue: debounce(async function(item){
      if(!item.id){
        // 添加的判断填写完整的话才保存
        if(item.name != '' && item.amount && item.term != ''&& item.nominalRate != '' && item.closingDays){
          if(!Number(item.nominalRate)){
            this.$message.error("请输入数字");
            return
          }
          if(!Number(item.term)){
            this.$message.error("请输入数字");
            return
          }
          item.term = Number(item.term) //转数字
          await this.getLoanAdd(item)// 保存的接口
          this.getLoanList()// 重新获取供应品种
        }
      }else{
        // 编辑的
        if(item.name == '' || !item.amount || !item.closingDays || item.nominalRate=="" || item.term == ''){
          this.$message.error("请填写完整");
        }else{
          if(!Number(item.nominalRate)){
            this.$message.error("请输入数字");
            return
          }
          if(!Number(item.term)){
            this.$message.error("请输入数字");
            return
          }
          item.term = Number(item.term) //转数字
          await this.getLoanEdit(item)// 编辑的接口
          this.getLoanList()// 重新获取供应品种
        }
      }
    },500),

    // 点击添加的取消按钮
    cancelBtn(){
      // 删掉最后一条
      this.tableList.splice(this.tableList.length-1,1)
      // this.editDrawer = false //关闭抽屉
      this.addBtnState = false //隐藏按钮
    },

    // 点击添加的保存按钮
    async saveBtn(){
      let item = this.tableList[this.tableList.length-1]
      // 添加的
      if(item.name == '' || !item.amount || !item.closingDays || item.nominalRate=="" || !item.term){
        this.$message.error("请填写完整");
      }else{
        await this.getLoanAdd(item)// 添加的接口
        await this.getLoanList()// 重新获取供应品种
        this.addBtnState = false //隐藏按钮
      }
    },

    // 添加的接口
    async getLoanAdd(item){
      let result = await getLoanAddApi(item)
      if(result.code == 200){
        this.$message({message: '编辑成功',type: 'success'});
      }
    },

    // 修改的接口
    async getLoanEdit(item){
      let result = await getLoanEditApi(item)
      if(result.code == 200){
        this.$message({message: '编辑成功',type: 'success'});
      }
    },

    // 删除的按钮
    async removeBtn(item){
      if(item.id){
        await this.getLoanRemove(item.id)
        this.getLoanList()// 重新获取供应品种
      }else{
        // 获得下标
        let index = this.tableList.indexOf(item);
        // 根据下标去删数据
        this.tableList.splice(index,1)
        this.addBtnState = false //关闭取消和保存按钮
      }
    },

    // 删除的接口
    async getLoanRemove(id){
      let result = await getLoanRemoveApi(id)
      if(result.code == 200){
        this.$message({message: '编辑成功',type: 'success'});
      }
    },

    // 关闭抽屉的回调
    drawerClose(){
      this.getLoanList()// 重新获取供应品种
    },
  },
}
</script>

<style scoped>
ul,h3,h4,p {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd20 {
  padding: 0 20px;
}
.mb60 {
  margin-bottom: 60px;
}
::v-deep .el-card{
  position: relative;
}
::v-deep .el-card__body {
  height: 100%;
  padding: 0;
}
::v-deep .el-card__body .top{
  margin: 0 30px;
}
::v-deep .el-card__body > div {
  height: calc(100% - 45px);
  overflow-y: auto;
}
::v-deep .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
/* 操作按钮 */
.handleBtn {
  color: #f87a23;
  font-size: 12px;
}

/* 供应机构 */
.conditionsTxt h3 {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: #909aaa;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
  margin: 0 30px;
  margin-top: 10px;
}
.conditionsTxt h3 > p {
  width: 19%;
}
.conditionsTxt h3 > p:last-child{
  width: 24%;
}
.conditionsTxt ul>li{
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 400;
  color: #2E3F5E;
  padding: 15px 30px;
}
.conditionsTxt ul>li:hover,
.conditionsTxt ul>li.isActive{
  background-color: #F5F7FA;
}
.conditionsTxt ul>li h4{
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: #2E3F5E;
  margin-bottom: 10px;
}
.conditionsTxt ul>li>p{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
  padding: 15px 0;
  border-bottom: 1px solid #F5F7FA;
}
.conditionsTxt ul>li>.detail-box{
  width: 100%;
  display: flex;
}
.conditionsTxt ul>li>.detail-box p{
  width: 19%;
}
.conditionsTxt ul>li>.detail-box p:last-child{
  width: 24%;
}

::v-deep .conditionsTxt ul>li .el-input__inner,
::v-deep .conditionsTxt ul>li .el-input--medium .el-input__icon{
  border: 0;
  padding: 0;
  background-color: transparent;
  height: 16px;
  line-height: 16px;
}
::v-deep .conditionsTxt ul>li .el-icon-arrow-up:before{
  content: "\E78F";
}

/* 编辑项目抽屉样式 */
::v-deep .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .el-drawer__header>span{
    font-size: 18px;
    font-weight: bold;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}
/* 抽屉 */
.edit-box{
    padding: 0 20px;
    margin-bottom: 60px;
}
.edit-box h3{
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  color: #909AAA;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 15px;
}
.edit-box h3>p{
  width: 17%;
}
.edit-box h3>p:first-child{
  width: 10%;
}
.edit-box h3>p:last-child{
  width: 21%;
}

.edit-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #EBEEF5;
}
.edit-list i{
    width: 8%;
    color: #909aaa;
    cursor: pointer;
}
.edit-list .el-input:nth-child(2){
    width: 92%;
}
.edit-list .detail-box{
  display: flex;
  width: 100%;
}
.edit-list .detail-box>p{
  width: 8%;
}
.edit-list .detail-box .el-input{
  width: 17%;
}
.edit-list .detail-box .el-select{
  width: 21%;
}
::v-deep .edit-list .el-input .el-input__inner{
  border: 0;
}

.drawerAdd{
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #f5f7fa;
}
.drawerAdd svg{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #909aaa;
    margin-left: 10%;
    cursor: pointer;
}

/* 添加按钮 */
.bottomBtn{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #F8F8F8;
  border-top: 1px solid #ECEDF0;
  z-index: 99;
}
.bottomBtn>.el-button{
  width: 100%;
  border: 0;
  background-color: #F8F8F8;
  line-height: 25px;
  color: #606E84;
}

.addAss-box{
  padding: 6px 30px;
}
::v-deep .bottomBtn .el-input .el-input__inner{
  height: 36px;
  line-height: 36px;
}
.addAss-btn{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.addAss-btn .el-input:nth-child(1){
  width: 25%;
}
.addAss-btn .el-input:nth-child(2){
  width: 35%;
}
.addAss-btn .el-button{
  height: 34px;
  padding: 0 20px;
  margin-left: 0;
  border-radius: 30px;
}
.addAss-btn .el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
}

/* 右侧按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px!important;
  z-index: 99;
}
::v-deep .subBtn>.el-button{
  width: 100px;
  padding: 8px 0!important;
  font-size: 14px;
  color: #606E84;
}
.subBtn>.el-button >>> span,
.subBtn>.el-button >>> span>a{
    display: block;
}
::v-deep .subBtn>.el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}

@media (max-width: 1180px) {
  .conditionsTxt h3 > p,
  .conditionsTxt ul>li>.detail-box {
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
  }
}
@media (max-width: 1120px) {
  
}
</style>